<template>
  <div>
    <button @click="increment">Count is {{ count }}</button>
    <button @click="reset" v-if="showReset">Reset</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  initialCount: {
    type: Number,
    default: 0
  },
  showReset: {
    type: Boolean,
    default: false
  }
});

const count = ref(props.initialCount);
const emit = defineEmits(["incremented"]);

const increment = () => {
  count.value++;
  emit("incremented", count.value);
};

const reset = () => {
  count.value = 0;
  emit("reset");
};

// 不需要 defineExpose，因为我们通过渲染结果测试组件
</script>
